<template>
  <div id="artList">
    <img class="main-img" src="static/default/banner001.png" alt>
    <div class="containner">
      <Row>
        <Col :md="18">
          <div class="module">
            <div id="header-info" v-show="!isSearch">{{ typeName }}</div>
            <div id="header-info" v-show="isSearch">关于“{{ typeName }}”</div>
            <ListItem :datas="artList"></ListItem>
          </div>
        </Col>
        <Col :md="6" id="left-box">
          <UserBox></UserBox>
          <!-- 特别推荐 -->
          <div class="module">
            <ModelItem :datas="modelList"></ModelItem>
          </div>
        </Col>
      </Row>
    </div>
    <FooterView></FooterView>
  </div>
</template>
<script>
import UserBox from "@/components/UserBox";
import ModelItem from "@/components/ModelItem";
import ListItem from "@/components/ListItem";
import FooterView from "@/components/Footer";
import { getAllList, getHotList, search } from "@/config/api";
export default {
  name: "Art-List",
  data() {
    return {
      index: 0,
      isSearch: false, //是否搜索
      typeName: "",
      artList: [],
      isMore: true,
      modelList: [] //特别推荐
    };
  },
  components: {
    FooterView,
    ModelItem,
    ListItem,
    UserBox
  },
  beforeMount() {
    window.onscroll = function() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //写后台加载数据的函数
        if (this.isMore) {
          console.log("获取更多");
          index += 10;
          const type = this.$route.query.type;
          //获取分类文章
          if (type) {
            this.isSearch = false;
            this.getLists();
          } else {
            this.isSearch = true;
            this.searchs();
          }
        }
      }
    };
  },
  methods: {
    //获取列表
    getLists() {
      const type = this.$route.query.type;
      const typeName = this.$route.query.typeName;
      this.typeName = typeName;
      this.$Spin.show();
      getAllList(type, this.index, "1").then(result => {
        const datas = result.data;
        if (datas.length < 10) {
          this.isMore = false;
        } else {
          this.isMore = true;
        }
        for (const index in datas) {
          if (datas.hasOwnProperty(index)) {
            const item = datas[index];
            this.artList.push(item);
          }
        }
        this.$Spin.hide();
      });
    },
    searchs() {
      const typeName = this.$route.query.typeName;
      this.typeName = typeName;
      this.$Spin.show();
      search(typeName, this.index).then(result => {
        const datas = result.data;
        if (datas.length < 10) {
          this.isMore = false;
        } else {
          this.isMore = true;
        }
        for (const index in datas) {
          if (datas.hasOwnProperty(index)) {
            const item = datas[index];
            this.artList.push(item);
          }
        }
        this.$Spin.hide();
      });
    }
  },
  mounted() {
    const type = this.$route.query.type;
    //获取分类文章
    if (type) {
      this.isSearch = false;
      this.getLists();
    } else {
      this.isSearch = true;
      this.searchs();
    }

    //获取热门文章列表
    getHotList().then(result => {
      this.modelList = result.data;
    });
  },
  watch: {
    $route(to, from) {
      this.isSearch = true;
      this.searchs("0");
    }
  }
};
</script>
<style scoped>
.module {
  background-color: #fff;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}
#header-info {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid;
  line-height: 36px;
  height: 36px;
}
@media screen and (max-width: 1200px) {
  #left-box {
    display: none;
  }
}
</style>


